<template>
	<view>
		<navBar title="我赞过的"></navBar>
		<view v-if="myPraises.length === 0" class="unData">
			<u-empty mode="data" text='暂无点赞过的博客' icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		</view>
		<view v-else class="mayblog">
			<view class="blogMain" v-for="praises in myPraises" :key="praises.blogId" @click="jump(praises)">
				<cover-image class="img" :src="praises.blog.cover"></cover-image>
				<view class="blogText">
					<text class="title">{{praises.blog.title}}</text>
					<view v-if="praises.blog.BlogClassifies.length ===1" class="classif">
						<u-tag :text="praises.blog.BlogClassifies[0].classifyName" plain size="mini" type="warning">
						</u-tag>
					</view>
					<view class="classif" v-else>
						<u-tag v-for="test in praises.blog.BlogClassifies" :key="test.classifyId"
							:text="test.classifyName" plain size="mini" type="warning"></u-tag>
					</view>
					<view class="icon">
						<u-icon color="#F5C668" name="thumb-up"></u-icon>{{praises.blog.like_count}}
						<u-icon color="#F5C668" name="more-circle"></u-icon>{{praises.blog.comment_count}}
						<u-icon color="#F5C668" name="eye"></u-icon>{{praises.blog.read_count}}
					</view>
					<text>{{timeFormatSeconds(praises.createdAt) +"发布"}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		praise
	} from '@/config/api.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				myPraises: [],
			}
		},
		onLoad() {
			this.initmyPraises()
		},
		methods: {
			async initmyPraises() {
				const myPraise = await praise(this.userInfo.token)
				this.myPraises = myPraise.data.rows
				console.log(this.myPraises);

			},
			timeFormatSeconds(time) {
				var d = time ? new Date(time) : new Date();
				var year = d.getFullYear();
				var month = d.getMonth() + 1;
				var day = d.getDate();
				var hours = d.getHours();
				var min = d.getMinutes();
				var seconds = d.getSeconds();

				if (month < 10) month = '0' + month;
				if (day < 10) day = '0' + day;
				if (hours < 0) hours = '0' + hours;
				if (min < 10) min = '0' + min;
				if (seconds < 10) seconds = '0' + seconds;
				return (year + '年' + month + '月' + day + '日' + hours + ':' + min + ':' + seconds);

			},
			jump(praises) {
				console.log(praises.blogId);
				uni.navigateTo({
					url: `/pages/blogDetails/blogDetails?id=${praises.blogId}`
				});
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
	.mayblog {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		background-color: #ececec;
		padding: 2vh 2vw 0 2vw;


		.blogMain {

			width: 100%;
			height: 20vh;
			box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
			background-color: #ffffff;
			padding: 2vw;
			box-sizing: border-box;
			// border: 1px solid black;
			display: flex;
			align-items: center;

			.img {
				border: 1px solid #ececec;
				width: 30vw;
				height: 17vh;
			}

			.blogText {
				height: 85%;
				margin-left: 3vw;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {

					font-size: 4vw;

				}

				.classif {
					display: flex;

					::v-deep .u-tag-wrapper {
						margin-right: 1vw;
					}
				}
			}

			.icon {
				display: flex;

				::v-deep .u-icon {
					margin: 0 1vw;
				}
			}
		}
	}

	.unData {
		padding-top: 8vh;
		width: 100vw;
		height: 100wh;

		::v-deep .u-empty__text {
			font-size: 18px !important;
		}

		::v-deep uni-image {
			width: 80% !important;
		}
	}
</style>
